<template>
    <div class="login">
        <div id="qrcode"></div>
    </div>
</template>

<script>
import QRCode from 'qrcodejs2'  // 引入qrcode

window.timeId='';
    export default {
        name:'login',
        data() {
            return {
                time: '',
            }
        },
        mounted () {
            this.qrcode();
        },
        methods: {
            qrcode() {
                let time = +new Date();
                this.time = time;
                // https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxfdf3cddde2cc2cc3&redirect_uri=http%3A%2F%2Fwww.xingfudaojiajiaju.cn%2Fapi%2Flogin%2Fcallback2%3Fid%3D88888&response_type=code&scope=snsapi_base&state=123&connect_redirect=1#wechat_redirect
                let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxfdf3cddde2cc2cc3&redirect_uri=http%3A%2F%2Fwww.xingfudaojiajiaju.cn%2Fapi%2Flogin%2Fcallback2%3Fid%3D${time}&response_type=code&scope=snsapi_base&state=123&connect_redirect=1#wechat_redirect`
                new QRCode('qrcode', {
                    width: 232,  
                    height: 232,
                    text: url, // 二维码地址
                });
                this.getToken();
            },
            getToken(){
                let param = {
                    ts: this.time
                };
                this.$api.getToken({param}).then(res=>{
                    console.log('res--', res);
                    if(res.token){
                        clearTimeout(window.timeId);
                        this.$router.push({path:'/',query:{token:res.token}});
                    } else {
                        window.timeId = setTimeout(() => {
                            this.getToken();
                        }, 2500);
                    }
                })
            }
        },
        destroyed () {
            clearTimeout(window.timeId);
        },
    }
</script>

<style lang="less" scoped>
    .login{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }
</style>